import React, { useState } from 'react';
/**
 * 函数组件是静态组件
 *    第一次渲染组件，把函数执行
 *    +产生一个私有的上下文
 *    +把解析出来的props（含children）传递进来（但是被冻结了）
 *    +对函数返回的JSX元素（virtualDom）进行渲染
 * 当我们点击按钮的时候，会把绑定的小函数执行：
 *    +修改上级上下文中的变量
 *    +私有变量值发生了变化
 *    +但是视图不会更新（除非在父组件中重新调用这个函数组件，可以传递不同的属性信息）
 * 函数组件第一次渲染完成之后，组件中的内容不会根据组件内的某些操作再更新，所以称之为静态组件
 */
const Vote = function Vote (props) {
  let { title } = props;
  let [supNum, setSupNum] = useState(10);
  let [oppNum, setOppNum] = useState(5);
  return (
    <div className="vote-box">
      <div className="header">
        <h2 className="title">{title}</h2>
        <span>{supNum + oppNum}人</span>
      </div>
      <div className="main">
        <p>支持人数: {supNum}人</p>
        <p>反对人数: {oppNum}人</p>
      </div>
      <div className="footer">
        <button onClick={() => {
          setSupNum(supNum++);
          console.log('supNum', supNum);
        }}>支持</button>
        <button onClick={() => {
          setOppNum(oppNum++);
          console.log('oppNum', oppNum);
        }}>反对</button>
      </div>
    </div>
  )
};
export default Vote;